<template>
  <div class="home">
    <!--项目数、接口数、用例数、报告数的展示-->
    <el-row style="margin-top:5px">
      <el-col :span="6">
        <div class="item" style="background:rgb(56, 161, 242)">
          <div class="item-header">
            <p>项目数</p>
            <span>实时</span>
          </div>
          <div class="item-body">
            <h2>20</h2>
          </div>
          <p class="item-tip">项</p>
        </div>
      </el-col>

      <el-col :span="6">

        <div class="item" style="background:rgb(49, 180, 141)">
          <div class="item-header">
            <p>接口数</p>
            <span>实时</span>
          </div>
          <div class="item-body">
            <h2>1403</h2>
          </div>
          <p class="item-tip">接</p>
        </div>

      </el-col>
      <el-col :span="6">

        <div class="item" style="background:rgb(117, 56, 199)">
          <div class="item-header">
            <p>用例数</p>
            <span>实时</span>
          </div>
          <div class="item-body">
            <h2>12435</h2>
          </div>
          <p class="item-tip">例</p>
        </div>

      </el-col>
      <el-col :span="6">

        <div class="item" style="background:#f56c6c">
          <div class="item-header">
            <p>报告数</p>
            <span>实时</span>
          </div>
          <div class="item-body">
            <h2>1235</h2>
          </div>
          <p class="item-tip">告</p>
        </div>
      </el-col>

    </el-row>

    <!--每日用例图表、饼图-->
    <el-row style="margin-top:5px">
      <!--每日用例折线图-->
      <el-col :span="12">
        <div id="dailyInterfaceCaseChart" :style="{ height: '500px',background:'rgb(255, 255, 255)'}" style="margin-right:5px;margin-left:5px"></div>
      </el-col>

      <!--每日用例饼图-->
      <el-col :span="12">
        <div id="interfaceChart" :style="{ height: '500px',background:'rgb(255, 255, 255)'}" style="margin-right:5px"></div>
      </el-col>

    </el-row>

    <!--项目下的接口分布图-->
    <el-row style="margin-top:5px">

      <div id="interfaceCaseDistributionChart" :style="{ height: '400px',background:'rgb(255, 255, 255)'}" style="margin-right:5px;margin-left:5px"></div>

    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {

      //项目下的接口用例分布
      dailyInterfaceCaseOption: {
        title: {
          text: '每日用例执行数图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['app', 'admin', '自动化', 'crm', 'pro']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'app',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'admin',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '自动化',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'crm',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'pro',
            type: 'line',
            stack: '总量',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]

      },

      //项目下的接口用例分布
      interfaceOption: {
        title: {
          text: '接口用例占比图',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'AITesting-app' },
              { value: 735, name: 'AITesting-admin' },
              { value: 580, name: 'AITesting-自动化' },
              { value: 484, name: 'AITesting-crm ' },
              { value: 300, name: 'AITesting-pro' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]

      },

      //接口用例统计
      interfaceCaseDistributionOption: {
        title: {
          text: '接口用例分布图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        label: {
          show: true, //开启显示
          position: 'top', //在上方显示
          textStyle: { //数值样式
            "fontSize": '24px',
            "color": '#34A1D6',
            "fontFamily": '宋体'
          }
        },
        legend: {
          data: ['接口数', '用例数', '项目数']

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['AITesting-app', 'AITesting-admin', 'AITesting-自动化', 'AITesting-crm', 'AITesting-pro', 'AITesting-oa', '其他']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '接口数',
            type: 'bar',

            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 120, 132, 120, 132, 200]
          },
          {
            name: '用例数',
            type: 'bar',
            stack: '广告',
            emphasis: {
              focus: 'series'
            },

            data: [320, 332, 320, 332, 320, 332, 100]
          },

          {
            name: '项目数',
            type: 'bar',
            stack: '项目',
            emphasis: {
              focus: 'series'
            },

            data: [320, 332, 320, 332, 320, 332, 100]
          },

        ]
      }
    }

  },

  methods: {

    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChartOne = this.$echarts.init(document.getElementById('dailyInterfaceCaseChart'))
      // 绘制图表
      myChartOne.setOption(this.dailyInterfaceCaseOption);


      // 基于准备好的dom，初始化echarts实例
      let myChartThree = this.$echarts.init(document.getElementById('interfaceChart'))
      // 绘制图表
      myChartThree.setOption(this.interfaceOption);

      // 基于准备好的dom，初始化echarts实例
      let myChartTwo = this.$echarts.init(document.getElementById('interfaceCaseDistributionChart'))
      // 绘制图表
      myChartTwo.setOption(this.interfaceCaseDistributionOption);
    }

  },



  mounted () {
    this.drawLine()

  }

}
</script>

<style scoped>
.home .item {
  position: relative;
  /* margin: 5px; */
  margin-left: 5px;
  margin-right: 5px;
  padding: 12px;
  height: 120px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  color: #fff;
}

.home .item-header {
  position: relative;
}

.home .item-header > p {
  margin: 0px;
  font-size: 14px;
}

.home .item-header > span {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.3);
}

.home .item-body > h2 {
  margin: 0;
  font-size: 32px;
  line-height: 60px;
  font-weight: 500;
}

.home .item-footer {
  line-height: 16px;
}

.home .item-footer > span {
  font-size: 10px;
}

.home .item-footer > p {
  margin: 0px;
  font-size: 12px;
}

.home .item-tip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  width: 70px;
  height: 70px;
  top: 1px;
  right: 10px;
  border: 2px solid #fff;
  border-radius: 100%;
  font-size: 48px;
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg);
  opacity: 0.1;
}
</style>